<template>
	<view class="main">
		<view class="header">
			<view class="seting"><text class="lg cuIcon-settings" @tap="setURL"></text></view>
			<view class="logo">CLIMS</view>
			<view>LIMS实验室综合管理系统</view>
		</view>
		<view class="form">
			<view class="inputbox">
				<text class="lg cuIcon-people"></text>
				<input class="f_input" placeholder="账号" v-model="loginFrom.username"/>
			</view>
			<view class="inputbox"><text class="lg  cuIcon-lock"></text>
				<input class="f_input" type="password" placeholder="密码" v-model="loginFrom.password" /></view>
			<view class="btnbox" @tap="login">登陆</view>
		</view>
		<view class="footer">
			<view>@力鸿智信（北京）科技有限公司</view>
		</view>
		<view class="cu-modal" :class="modalName=='setting'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">设置服务器地址</view>
					<view class="action" @tap="closeURL">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl" @tap.stop="">
					<input class="input_url" v-model="server_url" placeholder="服务器地址" />
					<view class="btnset" @tap="saveURL">保存</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Vue from 'vue'
	export default {
		data() {
			return {
				modalName: null,
				server_url: '',
				loginFrom:{
					username:'lb',
					password:'2'
				}
			}
		},
		methods: {
			setURL: function() {
				let _this = this;
				uni.getStorage({
					key: 'SERVER_URL',
					complete: function(res) {
						_this.server_url = res.data;
						_this.modalName = "setting"
					}
				});
			},
			closeURL: function() {
				this.modalName = null;
			},
			saveURL: function() {
				let _this = this;
				Vue.prototype.$http= _this.server_url;
				uni.setStorage({
					key: 'SERVER_URL',
					data: _this.server_url,
					success: function() {
						_this.modalName = null;
					}
				});
			},
			login: function() {
				if(this.loginFrom.username==''){
					uni.showToast({
						icon: 'none',
						title: '账号不能为空'
					});
					return ;
				}
				if(this.loginFrom.password==''){
					uni.showToast({
						icon: 'none',
						title: '密码不能为空'
					});
					return ;
				}
				uni.request({
					url: this.$http+'/sys/login',
					data: this.loginFrom,
					method:'POST',
					success: (res) => {
						if (res.statusCode == 200 && res.data.code==0) {
							uni.setStorageSync("token",res.data.token);
							uni.navigateTo({
								url:'./index/index'
							})
						}else{
							uni.showToast({
								icon: 'none',
								title: '登陆失败，请重试！'
							});
						}
					},
					fail:function(){
						uni.showToast({
							icon: 'none',
							title: '服务器请求超时！'
						});
					}
				})
			}
		},
		onLoad: function() {
			
		}
	}
</script>

<style scoped>
	.main {
		display: flex;
		flex-direction: column;
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 100vh;
	}

	.header {
		background-image: url(../static/BasicsBg.png);
		background-size: contain;
		width: 100%;
		height: 437.5rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-size: 40rpx;
	}

	.seting {
		width: 100%;
		text-align: right;
		padding: 30rpx;
	}

	.logo {
		width: 175rpx;
		height: 175rpx;
		border: 2px solid #fff;
		border-radius: 41.66rpx;
		margin-top: 10rpx;
		margin-bottom: 41.66rpx;
		line-height: 175rpx;
		text-align: center;
		font-size: 50rpx;
		font-weight: 900;
	}

	.form {
		height: 50vh;
		width: 100%;
		display: flex;
		flex-direction: column;
		justify-content: start;
		align-items: center;
	}

	.inputbox {
		width: 679.16rpx;
		height: 116.66rpx;
		border: 1px #D0D0D0 solid;
		border-radius: 10rpx;
		margin-top: 41.66rpx;
		font-size: 30rpx;
		color: #116AB7;
		line-height: 116.66rpx;
		padding-left: 20.41rpx;
		display: flex;
	}

	.f_input {
		width: 416.66rpx;
		height: 62.5rpx;
		margin-left: 20.83rpx;
		margin-top: 28rpx;
	}

	.input_url {
		text-align: left;
		border-bottom: 1px solid #d0d0d0;
	}

	.btnbox {
		width: 679.16rpx;
		height: 100rpx;
		border-radius: 10rpx;
		margin-top: 62.5rpx;
		background-color: #116AB7;
		font-size: 21px;
		color: #fff;
		line-height: 100rpx;
		text-align: center;
	}


	.btnset {
		width: 100%;
		height: 60rpx;
		border-radius: 4.16rpx;
		margin-top: 62.5rpx;
		background-color: #116AB7;
		font-size: 18px;
		color: #fff;
		line-height: 60rpx;
		text-align: center;
	}

	.footer {
		text-align: center;
		color: #D0d0d0;
		font-size: 16px;
		margin-bottom: 62.5rpx;

	}
</style>
